var vm = new Vue({
	el: '#app',
	data: {
		host:host,
		error_name: false,
		error_password: false,
		error_check_password: false,
		error_phone: false,
		error_allow: false,
		error_image_code: false,
		error_sms_code: false,

		username: '',
		password: '',
		password2: '',
		mobile: '', 
		image_code: '',
		image_code_url:'',
		image_code_uuid:'',
		sms_code: '',
		allow: false,
		error_image_code_message:'请填写图片验证码',
		sending_flag:false,
		sms_code_tip:'获取短信验证码',


	},
	mounted: function () {
		this.generate_code_url();

    },
	methods: {
		generate_code_url: function () {
			this.image_code_uuid = this.generate_uuid();
			this.image_code_url = this.host + '/image_codes/' + this.image_code_uuid + '/';

        },
		generate_uuid: function () {
			var d = new Date().getTime();
			if(window.performance && typeof window.performance.now === 'function'){
				d += performance.now();
			}
			var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
				var r = (d + Math.random()*16)%16 | 0;
				d = Math.floor(d/16);
				return (c =='x' ? r : (r&0x3|0x8)).toString(16);
			});
			return uuid;

        },
		send_sms: function(){
		    // 校验下是否填写手机号码
            this.check_phone();
            this.check_image_code();

            if( this.error_phone || this.error_image_code ){ // 如果error_phone为true表示有错误
                return;
            }

            // 判断是否有发送短信
            if( this.sending_flag == true ){ // True表示发送
                return;
            }

			// 使用axios发送get请求
			url = this.host + "/sms_codes/" + this.mobile + "/?image_code_id=" + this.image_code_uuid + "&text=" + this.image_code
			axios.get(url).then(response=>{
                this.sending_flag = true; // 表示60秒内发送了短信
			    // 表示后端发送短信成功
                // 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
                var num = 60;
                // 设置一个计时器
                var t = setInterval(() => {
                    console.log(num);
                    if (num == 1) {
                        // 如果计时器到最后, 清除计时器对象
                        clearInterval(t);
                        // 将点击获取验证码的按钮展示的文本回复成原始文本
                        this.sms_code_tip = '获取短信验证码';
                        // 将点击按钮的onclick事件函数恢复回去
                        this.sending_flag = false;
                    } else {
                        num -= 1;
                        // 展示倒计时信息
                        console.log(this)
                        this.sms_code_tip = num + '秒';
                    }
                }, 1000)


			}).catch(error=>{
			    // 响应状态码
                if (error.response.status == 400) {
                    this.error_image_code_message = '图片验证码有误';
                    this.error_image_code = true;
                } else {
                    console.log(error.response.data);
                }
                this.sending_flag = false;
			});
        },
		check_username: function (){
			var len = this.username.length;
			if(len<5||len>20) {
				this.error_name = true;
			} else {
				this.error_name = false;
			}
		},
		check_pwd: function (){
			var len = this.password.length;
			if(len<8||len>20){
				this.error_password = true;
			} else {
				this.error_password = false;
			}		
		},
		check_cpwd: function (){
			if(this.password!=this.password2) {
				this.error_check_password = true;
			} else {
				this.error_check_password = false;
			}		
		},
		check_phone: function (){
			var re = /^1[345789]\d{9}$/;
			if(re.test(this.mobile)) {
				this.error_phone = false;
			} else {
				this.error_phone = true;
			}
		},

		check_image_code: function (){
			if(!this.image_code) {
				this.error_image_code = true;
			} else {
				this.error_image_code = false;
			}	
		},
		check_sms_code: function(){
			if(!this.sms_code){
				this.error_sms_code = true;
			} else {
				this.error_sms_code = false;
			}
		},
		check_allow: function(){
			if(!this.allow) {
				this.error_allow = true;
			} else {
				this.error_allow = false;
			}
		},
		// 注册
		on_submit: function(){
			this.check_username();
			this.check_pwd();
			this.check_cpwd();
			this.check_phone();
			this.check_sms_code();
			this.check_allow();
		}
	}
});
